<template>
    <div>
        <el-dialog :title="dateForm.title" :visible.sync="dialogFormVisible" width="60%">
            <el-form :model="dateForm">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="id">
                            <el-input v-model="dateForm.id" autocomplete="off" style="width: 75%" :disabled="true" placeholder="自动生成"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="日期编号">
                            <el-input v-model="dateForm.code" autocomplete="off" style="width: 75%" :disabled="true" placeholder="自动生成"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="工作地点">
                            <el-select v-model="dateForm.placeId" placeholder="请选择地点" :disabled="dateForm.title === '查看日期信息'">
                                <el-option v-for="item in placeData"
                                           :key="item.id"
                                           :label="item.factoryName"
                                           :value="item.id">
                                    <span style="float: left">{{ item.factoryName }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.placeName }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="年">
                            <el-input v-model="dateForm.year" autocomplete="off" style="width: 40%" :disabled="true" placeholder="XX"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="月">
                            <el-input v-model="dateForm.month" autocomplete="off" style="width: 40%" :disabled="true" placeholder="XX"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="日">
                            <el-input v-model="dateForm.day" autocomplete="off" style="width: 40%" :disabled="true" placeholder="XX"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="创建时间">
                            <el-input v-model="dateForm.createTime" autocomplete="off" style="width: 75%" :disabled="true" placeholder="自动生成"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="上班时间">
                            <el-date-picker :disabled="dateForm.title === '查看日期信息'"
                                            v-model="dateForm.workShift"
                                            type="datetime"
                                            placeholder="选择日期时间"
                                            value-format="yyyy-MM-dd HH:mm:ss"
                                            align="right"
                                            :picker-options="pickerTimeQuickly">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="下班时间">
                            <el-date-picker :disabled="true"
                                            v-model="dateForm.closingTime"
                                            type="datetime"
                                            placeholder="选择日期时间"
                                            value-format="yyyy-MM-dd HH:mm:ss"
                                            align="right"
                                            :picker-options="pickerTimeQuickly">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
  import {apiDefaultErrorHandler} from "../../../api/base";
  import workDateApi from "../../../api/work/workDate";
  import workPlaceApi from "../../../api/work/workPlace";

  export default {
    name: "date",
    props: {
      dateForm: {
        title: '',
        id: '',
        code: '',
        year: '',
        month: '',
        day: '',
        placeId: '',
        createTime: '',
        workShift: '',
        closingTime: ''
      },
    },
    data() {
      return {
        pickerTimeQuickly: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        dialogFormVisible: false,
        placeData: []
      }
    },
    mounted() {
      this.queryPlaceInfo()
    },
    methods: {
      // 模态框显示
      showDialog() {
        this.dialogFormVisible = true
      },
      // 保存数据
      save() {
        workDateApi.save(this.dateForm).then(({ data }) => {
          if (this.$http.isResponseSuccess(data)) {
            this.$message('保存成功!!');
            this.dialogFormVisible = false
            // 触发父组件的children事件，将this.form回传过去
            this.$emit('children')
          } else {
            apiDefaultErrorHandler(data)
          }
        }).catch((ex) => {
          apiDefaultErrorHandler(ex)
        })
      },
      // 查询所有工作地点信息
      queryPlaceInfo() {
        workPlaceApi.queryAll().then(({data}) => {
          if (this.$http.isResponseSuccess(data)) {
            this.placeData = data.list
          } else {
            apiDefaultErrorHandler(data)
          }
        }).catch((ex) => {
          apiDefaultErrorHandler(ex)
        });
      }
    }
  }
</script>

<style>
</style>